<%@ include file="/common/taglibs.jsp"%>

<head>
    <title>123<fmt:message key="typingSourceDetail.title"/></title>
    <meta name="heading" content="${typingSource.sourceName}"/>
    <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="scripts/jquery.countdown.js"></script>
<script type="text/javascript">
        $(function(){
            $(".answer").keypress(function(e){
                alert(e.which);
                if (e.which == 13){ //判断所按是否回车键
                    var inputs = $("#typingSourceForm").find(".answer");  //获取表单中的所有输入框
                    var idx = inputs.index(this);  //获取当前焦点输入框所处的位置
                    
                    if (idx == inputs.length - 1){  // 判断是否是最后一个输入框
                        if (confirm("最后一个输入框已经输入,是否提交?")) //用户确认
                            $("#typingSourceForm").submit();  //提交表单
                    }else{
                        inputs[idx + 1].focus(); //设置焦点
                        inputs[idx + 1].select();  //选中文字
                    }
                    return false;//取消默认的提交行为
                }else{
					var $inputText=$('.answer');
					var len=1;
					
					for(var i=0;i<$inputText.length;i++){
						//alert($inputText[i].value.length);
						len+=$inputText[i].value.length;
					}
					$('#txtNum').text(len);
					
					var timeSpan=(new Date()-startTime)/1000;
					//alert(timeSpan/1000);
					$('#speed').text(Math.round(len/timeSpan*60)+"w/minute");
				}
            });
			var startTime = new Date();
			//startYear = new Date(austDay.getFullYear() + 1, 1 - 1, 26);
			$('#defaultCountdown').countdown({since: startTime, compact: true,format: 'HMS'});
			$(".answer").blur(function(){
				var orignalInputs = $("#typingSourceForm").find(".large");
				var inputs = $("#typingSourceForm").find(".answer");
				var compareResult = $("#typingSourceForm").find(".error");
				var idx = inputs.index(this);
				$.post("typingCompare.action",
						{
							userText:inputs[idx].val(),
							orignalText:orignalInputs[idx].val()
						},
						function(data,textStatus){
							compareResult.text=data;
						}
				);
			});
        });
    </script>	
</head>

<div >Time:<span id="defaultCountdown"></span> Text numbers:<span id="txtNum"></span>
	Speed:<span id="speed"></span></div>
<s:form id="typingSourceForm" action="saveTypingSource" method="post" validate="true">
    <li style="display: none">
        <s:hidden key="typingSource.sourceId"/>
    </li>
    <s:iterator value="sourceContent" id="line">
    	<s:textfield name="line" required="true" cssClass="text large"/>
    	<span id="compareResult" class="error"></span>
    	<s:textfield name="answer" id="answer" required="true" cssClass="text answer"/>
	</s:iterator>
    <li class="buttonBar bottom">
        <s:submit cssClass="button" method="save" key="button.save" theme="simple"/>
        <c:if test="${not empty typingSource.sourceId}">
            <s:submit cssClass="button" method="delete" key="button.delete"
                onclick="return confirmDelete('TypingSource')" theme="simple"/>
        </c:if>
        <s:submit cssClass="button" method="cancel" key="button.cancel" theme="simple"/>
    </li>
</s:form>

<script type="text/javascript">
    Form.focusFirstElement($("typingSourceForm"));
</script>
